import React, { Component } from 'react';
import './Register.scss'
import  { user_register } from '../utils/api'
import { Toast } from 'antd-mobile'
class Register extends Component {
    constructor(props){
        super(props)
        this.state={
            phone:'',
            pass:'',
            check:false
        }
    }
    valueChange = (e)=>{
        // console.log(e);
        // console.log(e.target);
        // console.log(e.target.name);
        // console.log(e.target.type);
        // console.log(e.target.checked);
        // console.log(e.target.value);
        this.setState({
            //  [e.target.name]可以动态获取触发事件的事件体当前的name名称，保证事件体名称要与修改state中的数据名称一致，否侧不能动态修改
            // e.target.type 可以获取触发事件的事件体的类型，复选框(checked)，单选框(radio), 其他input类型
            // e.target.checked 获取勾选框的值，ture 或者 false
            // e.target.value 获取其他input的值
            [e.target.name] : ((e.target.type == 'checkbox' || e.target.type == 'radio') ? e.target.checked : e.target.value)
        },()=>{
            // console.log(this.state);
        })


    }
    // 注册请求
    userRegister(){
        // 处理state中的数据，将传参需要的数据进行保留
        // 深拷贝，保证原始数据不被修改
        let newState = JSON.parse(JSON.stringify(this.state))
        delete newState.check
        console.log(newState);
        if(/^1[3-9]\d{9}$/.test(this.state.phone) == false ){
            Toast.show({
                icon: 'fail',
                content: '手机号码格式不正确',
            })
        }else if(/^\w{6}$/.test(this.state.pass) == false ){
            Toast.show({
                icon: 'fail',
                content: '请输入6位数字,字母,下划线组成的密码',
            })
        }else if(this.state.check == false){
            Toast.show({
                icon: 'fail',
                content: '未勾选不能进行注册',
            })
        }else {
            user_register(newState).then((res)=>{
                console.log(res);
                Toast.show({
                    icon: 'fail',
                    content: res.data.msg,
                })
            })
        }
    }
    render() {
        return (
            <div className='register'>
                {/* input, textare, select,是非受控元素，要变成受控元素，要通过value 和 onChange 绑定实现 */}
                {/* 对于单选，复选，要变成受控元素，通过checked 和 onChange 绑定实现 */}
                {/* onChange绑定，当元素的发生改变时更新元素的值到组件状态 */}
                <div className='phone inputs'>
                    <i className='iconfont icon-zhanghao'></i>
                    <input  type="text"  name="phone" value={this.state.phone} onChange={(e)=>{this.valueChange(e)}} placeholder='请输入用户名' />
                </div>
                <div className='pass inputs'>
                    <i className='iconfont icon-mima'></i>
                    <input type="password" name="pass" value={this.state.pass} onChange={(e)=>{this.valueChange(e)}} placeholder='请输入密码' />
                </div>
                <div className='btn inputs' onClick={()=>{this.userRegister()}}>
                    注册
                </div>
                <div className='text' onClick={()=>{this.props.history.push('/Login')}}>
                    登录
                </div>
                <div className='checkbox'>
                    <input type="checkbox" name="check" value={this.state.check}onChange={(e)=>{this.valueChange(e)}}/>
                    <span>勾选表示同意我司注册之规定</span>
                </div>
            </div>
        );
    }
}

export default Register;